<template>
  <!-- 顶部返回吸顶条 -->
  <base-Header :showButton="true" :backTextShow="true">
    <template #title>{{ t('keys.Message_details') }}</template>
  </base-Header>
  <div class="wrap">
    <div class="wrap_title">{{ detailsData.messageTitle }}</div>
    <div class="wrap_time">{{ detailsData.createdTime }}</div>
    <div class="wrap_cont" v-html="detailsData.messageContent"></div>
  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ERR_OK } from 'config/statusCode'
import { webmsgIdApi, getWebMsgIconListApi } from 'api/common/message'
// import baseHeader from 'components/base-header'
import { formatTime } from 'utils/tools.js'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const store = useStore()
const router = useRouter()
const route = useRoute()
const loading = ref(false)

const sourceType = ref(route.query.sourceType || '')
const messageId = ref(route.query.messageId || '')
const detailsData = ref({})

const getDeatils = async () => {
  loading.value = true
  const { code, data } = await webmsgIdApi(messageId.value, { sourceType: sourceType.value })
  if (code == ERR_OK) {
    detailsData.value = data || {}
    getreadList()
  }
  loading.value = false
}
getDeatils()

const getreadList = async () => {
  const { code, data } = await getWebMsgIconListApi()
  if (code == ERR_OK) {
    let messageList = data.messageList || []
    if (messageList.length > 0) {
      messageList.forEach((item) => {
        item.messageContent = escape2Html(item.messageContent.replace(/<[^<>]+>/g, '').replace(/&nbsp;/gi, ''))
        item.createdTime = formatTime(new Date(item.createdTime).getTime() / 1000, '')
      })
    }
    let msgObj = {
      msgList: messageList,
      msgTotle: data.totle || 0
    }
    let initStore = store.state.global.msg
    initStore.msgObj = msgObj
    store.dispatch('global/setGlobalState', { msg: initStore })
  }
}
const escape2Html = (str) => {
  var arrEntities = { lt: '<', gt: '>', nbsp: ' ', amp: '&', quot: '"' }
  return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
    return arrEntities[t]
  })
}
</script>
<style lang="scss" scoped>
.wrap {
  margin-top: 16px;
  font-size: 14px;
  .wrap_title {
    width: 100%;
    height: 24px;
    font-size: 16px;
    font-weight: 550;
    color: #333333;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .wrap_time {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }
  .wrap_cont {
    width: 100%;
    margin-top: 40px;
  }
}
</style>
